<!--
 * @Date: 2022-01-05 10:52:18
 * @LastEditors: LeeKing
 * @LastEditTime: 2022-01-05 16:12:05
 * @FilePath: \hmmm-20220102\src\module-dashboard\pages\lock.vue
-->
<!--
 * @Date: 2022-01-04 21:15:27
 * @LastEditors: LeeKing
 * @LastEditTime: 2022-01-05 10:47:09
 * @FilePath: \vue-admin-template - 副本\src\views\dashboard\components\LockLock.vue
-->
<template>
  <div class="body">
    <div class="lock">
      <button @click="dialogVisible = true" class="button">解锁哦</button>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="20%">
      <el-input v-model="input1" placeholder="1" :disabled="true" />
      <el-input v-model="input2" placeholder="请输入密码" show-password />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>
    <h2>锁上了 锁死了！</h2>
  </div>
</template>

<script>
export default {
  name: 'lock',
  data () {
    return {
      dialogVisible: false,
      input1: '',
      input2: '',
      psw: ''
    }
  },

  created () {
    this.input1 = this.$store.state.user.info.username
    this.psw = this.$store.state.user.info.password
  },

  methods: {
    onSave () {
      if (this.input2 === this.psw) {
        this.$router.push('/')
        this.dialogVisible = false
        this.$message.success('解锁成功哦！')
      } else {
        this.$message.error('密码不正确！')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
h2 {
  color: #fff;
  font-family: sans-serif;
  font-size: 4em;
  animation: animate 0.5s linear infinite;
}
.lock {
  width: 600px;
  height: 50px;
  // background-color: aliceblue;
  text-align: center;
  font-size: 20px;
  color: #0ff;
  position: absolute;
  top: 50%;
  margin-left: -50px;
  // left: 50%;
  margin-top: -200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .el-input__inner {
  margin: 10px 0;

  border-color: #d3d4d4;
}
::v-deep .el-input__inner:hover {
  border-color: #000;
}
// ~
::v-deep .el-dialog__header {
  background: #3f4245 !important;
}
.el-button--primary {
  background-color: #000;
  border-color: #000;
}
.el-button--default {
  // background-color: #000;
  border-color: #000;
  ::v-deep span {
    color: #000;
  }
}
.el-button--default:hover {
  background-color: rgb(255, 255, 255);
  // border-color: #000;
}

.button {
  display: inline-block;
  padding: 1em 2em;
  background-color: rgb(248, 63, 63);
  /* background-color: transparent; */
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5);
  outline: 0;
  transition: transform ease-in 0.1s, background-color ease-in 0.1s,
    box-shadow ease-in 0.25s;
}

.button::before {
  position: absolute;
  content: '';
  left: -2em;
  right: -2em;
  top: -2em;
  bottom: -2em;
  pointer-events: none;
  transition: ease-in-out 0.5s;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    /*  */ radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%),
    radial-gradient(circle, #fff 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%,
    20% 20%;
  background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
    65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
    64% 70%, 80% 71%;
  animation: bubbles ease-in-out 0.75s forwards;
}

.button:active {
  transform: scale(0.95);
  background-color: #000000;
  box-shadow: 0 2px 25px rgba(141, 93, 255, 0.5);
}
.button:active::before {
  animation: none;
  background-size: 0;
}
@keyframes bubbles {
  0% {
    background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
      65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
      64% 70%, 80% 71%;
  }
  50% {
    background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
      75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
      68% 96%, 95% 100%;
  }
  100% {
    background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
      100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
      100% 100%;
    background-size: 0% 0%;
  }
}

@keyframes animate {
  0%,
  100% {
    text-shadow: -1.5px -1.5px 0 #0ff, 1.5px 1.5px 0 #f00;
  }
  25% {
    text-shadow: 1.5px 1.5px 0 #0ff, -1.5px -1.5px 0 #f00;
  }
  50% {
    text-shadow: 1.5px -1.5px 0 #0ff, 1.5px -1.5px 0 #f00;
  }
  75% {
    text-shadow: -1.5px 1.5px 0 #0ff, -1.5px 1.5px 0 #f00;
  }
}
</style>
